<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 2. 为何需要收集依赖
        // 把用到这个变量的地方收集起来，若变量发生变化，所有要统一修改更新
        // 在get中，收集依赖，在set中触发依赖 =》为啥？数据修改触发set；数据读取触发get

        // 如何收集？
        // 声明一个dep数组，把依赖存储到window.target里面去，在getter里面push到dep数组
        // 在setter里面遍历dep数组，执行依赖函数
        let dep = []
        function defineReactive (data, key, val) {
            Object.defineProperty(data, key, {
                enumerable: true,
                configurable: true,
                get: function () {
                    // 存储依赖
                    dep.push(window.target)
                    // 读取触发get
                    return val
                },
                set: function (newVal) {
                    // 修改触发set
                    if (val === newVal) {
                        return
                    }
                    // 循环触发依赖
                    for (let i = 0; i < dep.length; i++) {
                        dep[i](newVal, val)
                    }
                    val = newVal
                }
            })
        }
        let xhg = {
            height: 180
        }
        defineReactive(xhg, 'height', 190)
        console.log(xhg.height, 'xhg.height');
    </script>
</body>
</html>
